<template>
    <div class="amap-page-container">
        <el-amap
                vid="amapDemo"
                :center="center"
                :zoom="zoom"
                class="amap-demo"
                :events="events">
        </el-amap>
        <div class="toolbar">
            position: [{{ lng }}, {{ lat }}] address: {{ address }}
        </div>
        <div class="toolbar2">
            <el-button type="primary" @click="qure">确认</el-button>
        </div>
    </div>
</template>

<style>
    .amap-demo {
        height: 366px !important;
        width: 100%;
    }

    .amap-page-container {
        height: 500px;
        width: 100%;
    }

    .toolbar {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .toolbar2 {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
</style>

<script>
    module.exports = {
        data: function () {
            let self = this;

            return {
                zoom: 12,
                address: '',
                position: [],
                events: {
                    click(e) {
                        let {lng, lat} = e.lnglat;
                        self.lng = lng;
                        self.lat = lat;
                        self.position[0] = self.lng
                        self.position[1] = self.lat
                        // 这里通过高德 SDK 完成。
                        var geocoder = new AMap.Geocoder({
                            radius: 1000,
                            extensions: "all"
                        });
                        geocoder.getAddress([lng, lat], function (status, result) {
                            if (status === 'complete' && result.info === 'OK') {
                                if (result && result.regeocode) {
                                    self.address = result.regeocode.formattedAddress;
                                    self.$nextTick();
                                }
                            }
                        });
                    }
                },
                lng: 0,
                lat: 0
            };
        },
        props: {
            center: []
        },
        methods: {
            qure() {
                this.$emit('qure', this.position);
            },
        }
    };
</script>
